<template>
  <div>
    <section class="header">
      <el-row>
        <el-col justify="center" type="flex">
          <ProductionSteps :active="4" align-center/>
        </el-col>
      </el-row>
    </section>

    <section class="help">
      <HeaderHelpDoc :head-context="headContext"/>
    </section>

    <el-row :gutter="30" class="main-wrap">
      <el-col :span="16" class="main-left">
        <el-row class="scan">
          <el-col class="operator-area">
            <el-row align="center" justify="center" type="flex">
              <el-col :span="6">
                <el-radio-group v-model="radio" class="anniu">
                  <el-radio disabled label="0">扫描不提交</el-radio>
                  <el-radio  label="1">扫描并提交流程</el-radio>
                </el-radio-group>
              </el-col>
<!--              <el-col v-if="radio === '0'" :span="12">-->
<!--                <span>请扫描SN条码: </span>-->
<!--                <el-input-->
<!--                  v-model="scanBarcode"-->
<!--                  v-loading="loadingScan" clearable-->
<!--                  placeholder="点击此处开始扫描" style="width: 270px"-->
<!--                  @keydown.native.enter="scanOrInputBarcode">-->
<!--                  <el-button slot="append" icon="el-icon-search" type="primary"></el-button>-->
<!--                </el-input>-->
<!--              </el-col>-->
              <el-col  :span="12">
                <span>请扫描SN条码: </span>
                <el-input
                  v-model="scanBarcode"
                  v-loading="loadingScan" clearable
                  placeholder="点击此处开始扫描" style="width: 270px"
                  @keydown.native.enter="scanOrInputBarcode1">
                  <el-button slot="append" icon="el-icon-search" type="primary"></el-button>
                </el-input>
              </el-col>
              <el-col :span="6">
                <span style="padding-left: 30px">下一道工序:</span>
                <span style="padding: 15px">
                <a-button @click="$router.push({name:'coverTest'})">封面质检</a-button>
              </span>
              </el-col>
            </el-row>
          </el-col>

          <el-col class="condition-filter">
            <el-row>
              <el-col :span="22">
                <line-select :value.sync="selectedLineBody" style="width: 37%;"></line-select>
              </el-col>
              <el-col :span="2">
                <el-checkbox>显示图片</el-checkbox>
              </el-col>
            </el-row>


          </el-col>


        </el-row>

        <el-row>
          <el-col>
            <el-row>
              <el-col>
                <el-collapse v-model="activeNames" style="border: 1px solid #e6ebf5">
                  <el-collapse-item name="1">
                    <template slot="title">
                      <h3 style="text-indent: 1em">工位信息展示</h3>
                    </template>
                    <el-row class="row-bg" justify="center" type="flex">
                      <el-col :span="5">工位名称：</el-col>
                      <el-col :span="5">工位线体：</el-col>
                      <el-col :span="5">所属车间：</el-col>
                      <el-col :span="5">操作员：</el-col>
                    </el-row>
                  </el-collapse-item>
                </el-collapse>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row class="product-info">
          <el-col>
            <h3 style="text-indent: 1em">产品信息</h3>
          </el-col>
          <el-col>
            <el-row justify="center" type="flex">
              <el-col :span="7">产品编号：{{ productInfo.OrderProductCode }}</el-col>
              <el-col :span="7">产品名称：{{ productInfo.ProductName }}</el-col>
              <el-col :span="7">商户：{{ productInfo.CtmName }}</el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row justify="center" type="flex">
              <el-col :span="7">作品名称：{{ productInfo.Name }}</el-col>
              <el-col :span="7"></el-col>
              <el-col :span="7">P数：{{ productInfo.PhotoNum }}</el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row justify="center" type="flex">
              <el-col :span="7">备注：{{ productInfo.NotifyContent }}</el-col>
              <el-col :span="7"></el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </el-col>

        </el-row>

        <el-row class="component-code">
          <el-col>
            <el-row style="text-indent: 1em;margin-top:  10px">
              <el-col :span="8">组件编码：</el-col>
              <el-col :span="8">组件名称：</el-col>
              <el-col :span="8">P数：</el-col>
              <vue-waterfall-easy
                ref="waterFall"
                :imgWidth="200"
                :imgsArr="folderPicturesDrawerData"
                hrefKey="fullUrl"
                srcKey="fullPath"
                style="min-height: 350px"
                @scrollReachBottom="scrollReachBottom"
              >
              </vue-waterfall-easy>
            </el-row>
          </el-col>
        </el-row>

        <el-row class="component-code">
          <el-col>
            <el-row style="text-indent: 1em;margin-top:  10px">
              <el-col :span="8">组件编码：</el-col>
              <el-col :span="8">组件名称：</el-col>
              <el-col :span="8">P数：</el-col>
              <vue-waterfall-easy
                ref="waterFall"
                :imgWidth="200"
                :imgsArr="folderPicturesDrawerData"
                hrefKey="fullUrl"
                srcKey="fullPath"
                style="min-height: 350px"
                @scrollReachBottom="scrollReachBottom"
              >
              </vue-waterfall-easy>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="7" class="main-right">
        <el-row>
          <el-col>
            <h3>待装过站的产品</h3>
            <AzureDynamicTable :column-des-objs="waitColumnDesObjs" :data="waitCoverTable"></AzureDynamicTable>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <h3>过站产品</h3>
            <AzureDynamicTable :column-des-objs="stopOverDesObjs" :data="stopOverTable"></AzureDynamicTable>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProductionSteps from '@/views/productManagement/aComponents/ProductionSteps'
import HeaderHelpDoc from '@/components/ATheFridayClub/HeaderHelpDoc'
import AButton from '@/components/ATheFridayClub/AButton'
import LineSelect from '@/components/ATheFridayClub/businessRelation/LineSelect'
import WorkSitInfo from '@/components/ATheFridayClub/businessRelation/WorkSitInfo'
import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
import vueWaterfallEasy from 'vue-waterfall-easy'
import {ScanCommit, ScanFrist} from '@/api/productCover'
import {ERR_OK} from '@/utils/commons'
import {getTechIdByName} from "@/views/productManagement/techId";

export default {
  name: 'coverDesign',
  components: {
    AzureDynamicTable,
    ProductionSteps,
    HeaderHelpDoc,
    AButton,
    LineSelect,
    WorkSitInfo,
    vueWaterfallEasy
  },
  data() {
    return {
      activeNames: ['1'],
      headContext: '扫描产品组件，进入指定格子，齐套后进行合册。',
      selectedLineBody: '',
      radio: '1',
      scanBarcode: '',
      loadingScan: false,
      folderPicturesDrawerData: [],
      waitCoverTable: [],
      waitColumnDesObjs: [],
      stopOverTable: [],
      stopOverDesObjs: [],
      // TechIdList: [], //当前流程id
      productInfo: {}//产品信息
    }
  },
  async created() {
    // await this.getProcessAll();
  },
  methods: {
    async scanOrInputBarcode({target: {value}}) {
      const {Result, Code, Message} = await ScanFrist({
        inCode: value.toString(),
        inTechId: (await getTechIdByName('封面制作')).TechId
      })
      if (Code === ERR_OK) {
        this.$message.info(Message)
        this.productInfo = Result
      }
    },

    async scanOrInputBarcode1({target: {value}}) {
      try {
        const {Result, Code, Message} = await ScanCommit({
          inCode: value.toString(),
          inTechId: (await getTechIdByName('封面制作')).TechId
        })
        if (Code === ERR_OK) {
          this.$message.success(Message);
          this.$speakText(Message)
        }
      } finally {
        this.scanBarcode = ""
      }
    },
    // async getProcessAll() {
    //   const { Result, Code } = await GetAll()
    //   if (Code === ERR_OK) {
    //     this.TechIdList = Result
    //   }
    // },
    scrollReachBottom() {
      this.$refs.waterFall.waterfallOver()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/index.scss";

.text-break {
  cursor: pointer;
  @include noWrap()
}

.header {
  padding: 10px 0;
}

.help {
  padding: 10px;
}

.main-wrap {
  padding: 10px;
  font-size: $mainSize;
  box-sizing: border-box;

  .main-left {
    min-width: 840px;

    .scan {
      .operator-area {
        padding: 15px 10px;
        border: 1px solid $borderColor;
        border-radius: 3px;
      }

      .condition-filter {

        padding: 40px 0;
      }
    }

    .anniu {
      float: left;
      width: 6%;
      margin-left: 1.8%;

      .el-radio {
        margin-bottom: 5px;
      }
    }

    .product-info {
      border: 1px solid #e6ebf5;
      margin-top: 18px;
      min-height: 170px;

      /deep/ .el-col {
        margin-top: 5px;
      }
    }

    .component-code {
      border: 1px solid #e6ebf5;
      margin-top: 18px;
      min-height: 350px;
    }
  }

  .main-right {
    border: 1px solid #e6ebf5;
    min-height: 1206px;
    min-width: 553px;

    /deep/ .el-col {
      margin-top: 5px;
    }
  }

}

</style>
